// ==========================================================================
// Extends
// ==========================================================================

@mixin m($modifier) {
  &-#{$modifier} {
    @content;
  }
}

$ps-stars: (
  "0":    "\E839",
  "05":   "\E839",
  "1":     "\E838",
  "15":    "\E838\E839",
  "2":     "\E838\E838",
  "25":    "\E838\E838\E839",
  "3":     "\E838\E838\E838",
  "35":    "\E838\E838\E838\E838",
  "4":     "\E838\E838\E838\E838",
  "45":    "\E838\E838\E838\E838\E839",
  "5":     "\E838\E838\E838\E838\E838"
) !default;

// Generate modifier color classes
@mixin stars($map) {
  @each $theme, $stars in $map {
    @include m($theme) {
      position: absolute;
      bottom: 50px;
      left: 90px;
      display: inline-block;
      color: $gray-medium;
      text-align: right;

      &::before {
        position: absolute;
        top: 0;
        left: -70px;
        float: left;
        margin-right: 0.5em;
        font-family: var(--#{$cdk}font-family-material-icons);
        font-size: 1.1em;
        color: $gray-light;
        content: "\E838\E838\E838\E838\E838";
      }

      &::after {
        position: absolute;
        top: 0;
        left: -70px;
        font-family: var(--#{$cdk}font-family-material-icons);
        font-size: 1.1em;
        color: #ffd100;
        content: $stars;
      }
    }
  }
}
